<template>
  <div class="p-8">
    <el-card class="rounded-3xl shadow-md">
      <template #header>
        <div class="card-header">
          <span>课程列表</span>
        </div>
      </template>
      <el-table v-loading="loading" ref="multipleTableRef" :data="tableData" style="width: 100%">
        <!-- 指定该列的数据来源，从tableData数组中每个元素的courseId属性获取数据 -->
        <el-table-column property="courseId" label="课程ID" width="120" />
        <el-table-column property="courseName" label="课程名称" />
        <el-table-column property="teacher" label="任课教师" />
        <el-table-column property="all" label="容量" />
        <el-table-column property="now" label="已选人数" />
        <el-table-column label="是否已满">
          <!-- 使用作用域插槽来自定义列的内容 -->
          <template #default="scope">
            <div>
              <!-- 根据scope.row.now（现在所选人）和scope.row.all（总容量）的值决定显示"否"或"是" -->
              <span
                class="text-green-600 bg-green-100 dark:bg-green-900 dark:text-green-300 px-2 py-1 rounded-md"
                v-if="scope.row.now <= scope.row.all"
                >否</span
              >
              <span
                class="text-red-600 bg-red-100 dark:bg-red-900 dark:text-red-300 px-2 py-1 rounded-md"
                v-else
                >是</span
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <!--scope变量会包含当前行的数据，你可以使用这个变量来访问和展示行中的数据。-->
          <template #default="scope">
            <div>
              <!-- link让按钮呈现为链接样式 @click="selectCourse(scope.row)这是Vue的事件监听语法。当按钮被点击时，它将触发selectCourse或cancelCourse方法，并将当前行的数据（scope.row）作为参数传递给这些方法。-->
              <el-button type="primary" link @click="selectCourse(scope.row)"
                >选课</el-button
              >
              <el-button type="danger" link @click="cancelCourse(scope.row)"
                >退课</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!--这是Vue的插槽语法，用于定义一个名为footer的插槽的内容。-->
      <template #footer>
        <div class="flex justify-between items-center">
          <p class="text-sm text-gray-400">
            共 {{ total }} 条记录 第 {{ currentPage }} / {{ totalPage }} 页
          </p>
          <div class="flex items-center gap-4">
            <!-- Element UI的分页组件 -->
            <!-- v-model实现双向数据绑定当前页码和每页显示的记录数 -->
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :background="true"
              layout="prev, pager, next"
              :total="total"
              @current-change="handleCurrentChange"
            />
            <!-- Element UI的选择器组件，用于选择每页显示的记录数 -->
            <el-select
              class="w-32"
              v-model="pageSize"
              @change="handleSizeChange"
            >
            <!-- 循环渲染选择器的选项 -->
              <el-option
                v-for="option in pageSizeOptions"
                :value="option"
                :key="option"
                :label="`${option}条/页`"
              >
                {{ option }}条/页
              </el-option>
            </el-select>
            <!-- 快速跳转至某页的控件 -->
            <div class="flex items-center gap-2">
              <p class="text-sm text-gray-400">跳至</p>
              <!-- Element UI的数字输入框组件，允许输入页码 -->
              <el-input-number
                :min="1"
                :max="totalPage"
                @change="handleCurrentChange"
                :controls="false"
                class="w-16"
              />
              <p class="text-sm text-gray-400">页</p>
            </div>
          </div>
        </div>
      </template>
    </el-card>
    <!--用于创建一个可选择项目的抽屉式界面-->
    <!--v-model 与:drawer属性一起使用，表示抽屉的打开状态。isDrawerOpen是一个响应式变量，用于控制抽屉的显示与隐藏。-->
    <SelectDrawer
      v-model:drawer="isDrawerOpen"
      :itemData="drawerItemData"
      :type="drawerType"
      @refresh-list="getShowInfo"
    />
  </div>
</template>
<script setup>
// 导入ApiCourse，用于发起API请求的自定义对象
import { ApiCourse } from "@/core/api/index.js";
import { computed, onMounted, ref } from "vue";
import SelectDrawer from "./SelectDrawer.vue";

// 创建一个loading变量，用于控制表格的加载状态
const loading = ref(false);
// 使用ref创建响应式引用，用于存储当前页码
const currentPage = ref(1);
// 使用ref创建响应式引用，用于存储每页显示的行数
const pageSize = ref(10);
const total = ref(10);
// 使用computed创建计算属性，根据total和pageSize计算总页数
const totalPage = computed(() => Math.ceil(total.value / pageSize.value));
const pageSizeOptions = [10, 20, 50, 100];
// 使用ref创建响应式引用，用于存储表格数据
const tableData = ref([]);

//控制自定义SelectDrawer组件的显示与隐藏
const isDrawerOpen = ref(false);
//用于存储抽屉组件中展示的数据项
const drawerItemData = ref({});
//存储抽屉组件的类型（例如"select"或"cancel"）
const drawerType = ref("select");

// 定义一个异步函数getShowInfo，用于获取课程列表数据
const getShowInfo = async () => {
  // 显示加载动画
  loading.value = true;
  // 发起API请求，获取课程列表数据
  const response = await ApiCourse.getCourseList({
    page: currentPage.value,
    size: pageSize.value,
  });
  // 如果响应的code属性为0（假设这表示成功），更新表格数据和总行数
  if (response.code == 0) {
    tableData.value.splice(0, tableData.value.length, ...response.data.list);
    total.value = response.data.total ? response.data.total : 10;
  }
  // 隐藏加载动画
  loading.value = false;
};

// 定义toggleDrawer函数，用于切换SelectDrawer组件的显示状态
const toggleDrawer = () => {
  isDrawerOpen.value = !isDrawerOpen.value;
};

// 定义handleSizeChange函数，用于处理每页显示行数变化时的逻辑
const handleSizeChange = (size) => {
  pageSize.value = size;
  getShowInfo();
};
// 定义handleCurrentChange函数，用于处理当前页码变化时的逻辑
const handleCurrentChange = (page) => {
  currentPage.value = page;
  getShowInfo();
};
// 定义selectCourse函数，用于处理选择课程的操作
const selectCourse = (row) => {
  drawerItemData.value = row;
  //drawerType: 这个变量用于指示 SelectDrawer 组件当前应该处于哪种模式。
  drawerType.value = "select";
  //用于控制 SelectDrawer 组件显示和隐藏的函数。它在 drawerType 变化时被调用，以确保用户可以看到更新后的界面。
  toggleDrawer();
};
// 定义cancelCourse函数，用于处理取消选择课程的操作
const cancelCourse = (row) => {
  drawerItemData.value = row;
  drawerType.value = "cancel";
  toggleDrawer();
};
// 使用onMounted生命周期钩子，在组件挂载后自动调用getShowInfo函数
onMounted(() => {
  getShowInfo();
});
</script>
